<template>
  <div>
    <TitleSecondary
      v-if="titleShow"
      :title="title"
      :icon="icon"
      @change="handleChangeIcon"
    />
    <div v-show="icon === 'up'" class="log-container">
      <p-table
        row-key="id"
        :columns="columns"
        bordered
        :scroll="{ x: '100%' }"
        :pagination="false"
        :data-source="dataSource"
        :row-class-name="getClass"
      >
        <a
          slot="attachment.atthName"
          slot-scope="text, record"
          @click="handleInsertChange(record)"
        >
          {{ text }}
        </a>
      </p-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '商机阶段',
    },
    defaultIcon: {
      type: String,
      default: 'down',
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
    titleShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      icon: 'down',
    };
  },
  computed: {
    statusOptions() {
      return {
        0: '未启动',
        1: '进行中',
        2: '已通过',
        3: '不涉及',
        4: '已失销',
      };
    },
    stageOptions() {
      return {
        1: '商机信息确认',
        2: '商机决策',
        3: '投标',
        4: '立项',
        5: '产品研发及验证',
        6: '商机认证',
        7: '赢单',
      };
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '商机阶段',
          width: 150,
          dataIndex: 'opportunityStage',
          customRender: text => this.stageOptions[text],
        },
        {
          align: 'center',
          title: '处理人',
          width: 100,
          ellipsis: true,
          dataIndex: 'currentUserName',
        },
        {
          align: 'center',
          title: '部门',
          width: 100,
          ellipsis: true,
          dataIndex: 'departmentName',
        },
        {
          align: 'center',
          title: '职位',
          width: 100,
          ellipsis: true,
          dataIndex: 'positionName',
        },
        {
          align: 'center',
          title: '阶段状态',
          width: 100,
          ellipsis: true,
          dataIndex: 'processStatus',
          customRender: text => this.statusOptions[text],
        },
        {
          align: 'center',
          title: '阶段说明',
          width: 200,
          ellipsis: true,
          dataIndex: 'processOpinion',
        },
        {
          align: 'center',
          title: '开始时间',
          width: 150,
          ellipsis: true,
          dataIndex: 'startTime',
        },
        {
          align: 'center',
          title: '耗时',
          width: 150,
          ellipsis: true,
          dataIndex: 'dateDifferenceFormat',
        },
        {
          align: 'center',
          title: '附件',
          width: 150,
          ellipsis: true,
          dataIndex: 'attachment.atthName',
          scopedSlots: { customRender: 'attachment.atthName' },
        },
      ];
      return columns;
    },
  },
  watch: {},
  created() {
    this.icon = this.defaultIcon;
    this.getClass();
  },
  methods: {
    getClass(record) {
      if (record !== undefined) {
        if (record.overdue) {
          return 'business-red';
        } else {
          return '';
        }
      }
    },
    handleChangeIcon(icon) {
      this.icon = icon === 'down' ? 'up' : 'down';
    },
    handleInsertChange(record) {
      const a = document.createElement('a');
      a.href = record.attachment.atthAccessPath;
      a.download = `${record.attachment.atthName}`;
      a.click();
    },
  },
};
</script>

<style lang="less" scoped>
.log-container {
  width: 100%;
}
.item-container {
  display: flex;
  align-items: center;
}
.button-container {
  margin-bottom: 20px;
}
.table-container {
  margin-bottom: 40px;
}
/deep/ .business-red {
  color: #ff0000 !important;
}
/deep/ .poros-select-selection {
  border: none;
}
</style>
